{% extends "base.html" %}

{% block title %}疫情防控系统-实时监控{% endblock %}

{% block navbar %}
    <li class="nav-item d-none d-sm-inline-block">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            切换摄像头
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              {% for i in camera_list %}
                  <li><button onclick="change_camera({{ i.id }});" class="btn btn-default">{{ i.ipv4 }}</button></li>
              {% endfor %}
          </ul>
        </div>
    </li>
{% endblock %}

{% block content %}
    <div class="container-fluid">
          <div class="row">
              <div class="col-md-12">
                  <img src="/video/video_feed">
              </div>
              <!-- /.col -->
          </div>
          <!-- /.row -->
    </div><!--/. container-fluid -->
{% endblock %}

{% block script %}
<script>
    // 更改摄像头
    function change_camera(value){
        id_camera = value;
        console.log(id_camera);
    }
</script>
{% endblock %}